<template>
    <div class="finish">
        <div class="all-order" v-for="(item, index) in toplist.data">
            <div class="text">
                <span>外卖订单：{{ item.id }}</span>
                <p>已付款</p>
            </div>
            <div class="all-box">
                <div class="area">
                    <h4>{{ area }}</h4>
                    <p>{{ item.time }}</p>
                </div>
                <div class="shop">
                    <p>{{ item.name }} </p>
                    <span>共{{ item.count }}件商品</span>
                </div>
                <div class="price">
                    <h5>￥{{ item.total }}</h5>

                    <div class="total-box">

                        <p>评价:</p> <van-rate v-model="value" allow-half />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.finish {
    width: 100%;
    height: 1000px;
    background-color: #f8f8f8;

    .all-order {
        width: 95%;
        margin: .8rem auto 1rem;
        display: flex;
        flex-direction: column;

        .text {
            width: 100%;
            height: 2.5rem;
            line-height: 2.6rem;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            border-bottom: 1.2px solid #f8f8f8;

            span {
                font-size: 13.5px;
                color: #a6a6a6;
                margin-left: .8rem;
            }

            p {
                font-size: 13.5px;
                color: rgb(8, 181, 118);
                margin-right: .8rem;

            }
        }

        .all-box {
            width: 100%;
            height: 9rem;
            background-color: #fff;

            .area {
                margin-top: .65rem;
                display: flex;
                justify-content: space-between;
                align-items: center;

                h4 {
                    font-size: 15.5px;
                    color: #383838;
                    width: 50%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    word-break: break-all;
                    white-space: nowrap;
                    margin-left: .8rem;
                }

                p {
                    margin-right: .8rem;
                    font-size: 12px;
                    color: #a6a6a6;
                }
            }
        }

        .shop {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: .5rem;

            p {
                margin-left: .8rem;
                font-size: 12px;
                width: 11.5rem;
            }

            span {
                margin-right: .8rem;
                font-size: 12.2px;
            }
        }

        .price {
            margin-top: 1.8rem;
            display: flex;
            justify-content: space-between;

            h5 {
                margin-left: .8rem;
                font-size: 16px;
                margin-top: .3rem;
            }

            .total-box {
                display: flex;
                margin-top: .2rem;
                margin-right: .5333rem;

                // .pay {
                //     margin-right: .8rem;
                //     font-size: 12px;
                //     padding: .2667rem .6333rem;
                //     border: 1px solid rgb(8, 181, 118);
                //     color: rgb(8, 181, 118);
                //     border-radius: 5px;
                // }
                p {
                    margin-right: .2667rem;
                    color: rgb(8, 181, 118);
                }

                .van-icon-star {
                    color: #ffd21e;
                }
            }
        }
    }
}
</style>

<script lang="ts"  setup>
import store from '@/store';
import { ref, reactive } from 'vue';
import { finishList, addressList } from '../../request'
import { showSuccessToast, showFailToast } from 'vant';
let address = ref('');
const value = ref(2.5);
address.value = store.state.addressDetail;
console.log('aaaa', store.state.addressDetail);
let toplist: any = reactive({
    data: []
})

finishList().then((content: any) => {
    let { result } = content;

    let hot = result.map((item: any) => {
        let obj: any = {};
        obj.id = item.finish_id;
        obj.name = item.finish_name;
        obj.address = item.finish_address;
        obj.count = item.finish_count;
        obj.time = item.finish_time;
        obj.total = item.finish_total
        return obj
    })
    toplist.data = hot;

}).catch(error => {
    console.log(error);
})


let area = ref('')
addressList().then((content: any) => {
    console.log(content);
    let { result } = content;
    area.value = result[0].address_name
})
    .catch(error => {
        console.log(error);

    })


</script>